Full source code website bán hàng thương mại điện tử gần giống shopee
472.167 lượt xem;
1 html,
2 body {height: 100%;}
3 body {
4 font-family: /* 'Istok Web' ,*/ "Helvetica", sans-serif;
5 font-size: 12px;
6 margin: 0;
7 background-color: #363839;
8 background-image: -webkit-gradient(linear, left top, left bottom, from(#7C8084), to(#363839));
9 background-image: -webkit-linear-gradient(top, #7C8084, #363839);
10 background-image: -moz-linear-gradient(top, #7C8084, #363839);
11 background-image: -ms-linear-gradient(top, #7C8084, #363839);
12 background-image: -o-linear-gradient(top, #7C8084, #363839);
13 background-image: linear-gradient(top, #7C8084, #363839);
14 }
15 #login { /* box formulaire */
16 background:
17 radial-gradient(black 15%, transparent 16%) 0 0,
18 radial-gradient(black 15%, transparent 16%) 8px 8px,
19 radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
20 radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
21 background:
22 -moz-radial-gradient(black 15%, transparent 16%) 0 0,
23 -moz-radial-gradient(black 15%, transparent 16%) 8px 8px,
24 -moz-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
25 -moz-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
26 background:
27 -webkit-radial-gradient(black 15%, transparent 16%) 0 0,
28 -webkit-radial-gradient(black 15%, transparent 16%) 8px 8px,
29 -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
30 -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
31 background-color:#373737;
32 background-size:16px 16px;
33 -webkit-background-size:16px 16px;
34 -moz-background-size:16px 16px;
35 -o-background-size:16px 16px;
36 height: 310px;
37 width: 420px;
38 margin: -175px 0 0 -240px;
39 padding: 30px;
40 position: absolute;
41 top: 50%;
42 left: 50%;
43 z-index: 0;
44 -moz-border-radius: 10px;
45 -webkit-border-radius: 10px;
46 border-radius: 10px;
47 -webkit-box-shadow:
48 0 0 2px rgba(0,0,0,0.5),
49 0 1px 1px rgba(0,0,0,0.5),
50 0 3px 0 #373737,
51 0 4px 0 rgba(0,0,0,0.5),
52 0 6px 0 #373737,
53 0 7px 0 rgba(0,0,0,0.5),
54 0 -10px 5px 10px rgba(0, 0, 0, 0.3) inset,
55 0 10px 10px 15px rgba(255, 255, 255, 0.1) inset;
56 -moz-box-shadow:
57 0 0 2px rgba(0, 0, 0, 0.5),
58 1px 1px 0 rgba(0,0,0,0.5),
59 3px 3px #373737,
60 4px 4px 0 rgba(0,0,0,0.5),
61 6px 6px #373737,
62 7px 7px 0 rgba(0,0,0,0.5)
63 0 -10px 5px 10px rgba(0, 0, 0, 0.3) inset,
64 0 10px 10px 15px rgba(255, 255, 255, 0.1) inset;
65 box-shadow:
66 0 0 2px rgba(0, 0, 0, 0.5),
67 0 1px 1px rgba(0,0,0,0.5),
68 0 3px 0 #373737,
69 0 4px 0 rgba(0,0,0,0.5),
70 0 6px 0 #373737,
71 0 7px 0 rgba(0,0,0,0.5),
72 0 -10px 5px 10px rgba(0, 0, 0, 0.3) inset,
73 0 10px 10px 15px rgba(255, 255, 255, 0.1) inset;
74 }
75 #login:before { /* couture autour du formulaire */
76 content: '';
77 position: absolute;
78 z-index: -1;
79 border: 1px dashed rgba(143, 143, 143, 0.7);
80 top: 5px;
81 bottom: 5px;
82 left: 5px;
83 right: 5px;
84 -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 5px 1px rgba(0, 0, 0, 0.5) inset;
85 -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 5px 1px rgba(0, 0, 0, 0.5) inset;
86 box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 5px 1px rgba(0, 0, 0, 0.5) inset;
87 }
88 #login:after{
89 -moz-transform: none;
90 border-bottom: 28px solid transparent;
91 border-left: 28px solid #DE6625;
92 border-right: 28px solid #DE6625;
93 height: 40px;
94 position: absolute;
95 right: -36px;
96 width: 0;
97 top: 88px;
98 content: "";
99 display: block;
100 z-index: 20;
101 }
102 h1 {
103 text-transform: capitalize;
104 text-align: right;
105 margin: 0 0 30px 0;
106 letter-spacing: 4px;
107 font-size:35px;
108 letter-spacing: -0.06em;
109 }
110 #ff-proof.ribbon:after { /* ruban tombant */
111 -moz-transform: none;
112 border-top: 55px solid transparent;
113 border-left: 55px solid #DE6625;
114 border-right: 55px solid transparent;
115 height: 40px;
116 position: absolute;
117 right: -107px;
118 width: 0;
119 bottom: -43px;
120 content: "";
121 display: block;
122 z-index: 20;
123 }
124 .ribbon:before { /* ombre du ruban tombant */
125 transform: rotate(280deg);
126 -moz-transform: rotate(280deg);
127 -webkit-transform: rotate(280deg);
128 transform-origin: right bottom;
129 -webkit-transform-origin: right bottom;
130 -moz-transform-origin: right bottom;
131 border-top: 55px solid rgba(0, 0, 0, 0.3);
132 border-right: 55px solid transparent;
133 bottom: 30px;
134 content: "";
135 display: block;
136 height: 0;
137 position: absolute;
138 right: -53px;
139 width: 20px;
140 z-index: 10;
141 box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.3);
142 }
143 .ribbon { /* ruban */
144 background-color: #C94700;
145 background-size:5px 5px,100% 100% ;
146 background-image: -webkit-gradient(linear, left top, left bottom, from(#C94700), to(#B84100));
147 background-image: -webkit-linear-gradient(45deg , transparent 0%, transparent 25%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.15) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.15) 100%), rgba(0, 0, 0,.125) 20px),
148 -webkit-linear-gradient(top, #C94700, #B84100);
149 background-image: -moz-linear-gradient(45deg , transparent 0%, transparent 25%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.15) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.15) 100%),
150 -moz-linear-gradient(top, #C94700, #B84100);
151 background-image: -ms-linear-gradient(45deg , transparent 0%, transparent 25%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.15) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.15) 100%), rgba(0, 0, 0,.125) 20px),
152 -ms-linear-gradient(top, #C94700, #B84100);
153 background-image: -o-linear-gradient(45deg , transparent 0%, transparent 25%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.15) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.15) 100%), rgba(0, 0, 0,.125) 20px),
154 -o-linear-gradient(top, #C94700, #B84100);
155 background-image: linear-gradient(45deg , transparent 0%, transparent 25%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.15) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.15) 100%), rgba(0, 0, 0,.125) 20px),
156 linear-gradient(top, #C94700, #B84100);
157 /* border-bottom: 1px solid rgba(255, 255, 255, 0.3); */
158 border-top-right-radius: 20px 5px;
159 color: #301607;
160 height: 55px;
161 width: 460px;
162 line-height: 55px;
163 padding: 0 5px 0 0;
164 margin-left: -32px;
165 position: relative;
166 text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.3);
167 box-shadow: 0 -25px 25px rgba(0, 0, 0, 0.2) inset, 0 0 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(0, 0, 0, 0.75) inset, 0 2px 5px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.7),inset 4px 0 2px -1px rgba(0,0,0,0.3),0 -2px 5px rgba(0, 0, 0, 0.2) ;
168 -moz-box-shadow: 0 -25px 25px rgba(0, 0, 0, 0.2) inset, 0 0 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(0, 0, 0, 0.75) inset, 0 2px 5px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.7),inset 4px 0 2px -1px rgba(0,0,0,0.3),0 -2px 5px rgba(0, 0, 0, 0.2) ;
169 -webkit-box-shadow: 0 -25px 25px rgba(0, 0, 0, 0.2) inset, 0 0 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(0, 0, 0, 0.75) inset, 0 2px 5px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.7),inset 4px 0 2px -1px rgba(0,0,0,0.3),0 -2px 5px rgba(0, 0, 0, 0.2) ;
170 }
171 fieldset {
172 position: relative;
173 border: 0;
174 padding: 0;
175 margin: 0;
176 text-align: center;
177
178 }
179 fieldset#actions{
180 display: block;
181 height: 92px;
182 overflow: hidden;
183 position: relative;
184 }
185 fieldset#inputs{ /* contour des inputs */
186 padding: 10px;
187 margin: 0px;
188 width: 400px;
189 background-color: #C8BCB6;
190 background: -webkit-gradient(linear, left top, left bottom, from(#C8BCB6), to(#B3A39A));
191 background: -webkit-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, .05) 10px, rgba(0, 0, 0, .05) 20px),-webkit-linear-gradient(top, #C8BCB6, #B3A39A);
192 background: -moz-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.05) 20px) repeat scroll 0 0%, -moz-linear-gradient(center top , #C8BCB6, #B3A39A);
193 background: -ms-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0,.05) 10px, rgba(0, 0, 0,.05) 20px),-ms-linear-gradient(top, #C8BCB6, #B3A39A);
194 background: -o-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0,.05) 10px, rgba(0, 0, 0,.05) 20px),-o-linear-gradient(top, #C8BCB6, #B3A39A);
195 background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0,.05) 10px, rgba(0, 0, 0,.05) 20px),linear-gradient(top, #C8BCB6, #B3A39A);
196 -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 2px 2px 2px #1F1F1F inset;
197 -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 2px 2px 2px #1F1F1F inset;
198 box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 2px 2px 2px #1F1F1F inset;
199 -moz-border-radius: 5px;
200 -webkit-border-radius: 5px;
201 border-radius: 5px;
202 }
203 @media screen and (-webkit-animation) {fieldset#inputs:before {width: 440px!important;}}
204 fieldset#inputs:before{ /* couture autour des inputs */
205 content: "";
206 padding: 0px;
207 margin: -18px -22px;
208 width: 435px;
209 height: 145px;
210 position: absolute;
211 border: 1px dashed rgba(143, 143, 143,0.7);
212 -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 1px 1px rgba(0, 0, 0, 0.5) inset;
213 -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 1px 1px rgba(0, 0, 0, 0.5) inset;
214 box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 1px 1px rgba(0, 0, 0, 0.5) inset;
215 -moz-border-radius: 2px;
216 -webkit-border-radius: 2px;
217 border-radius: 2px;
218 z-index: -1;
219 }
220 #inputs input { /* pictos des inputs */
221 background: #f1f1f1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABkCAYAAACPQLC2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhtJREFUeNrsV1FuwjAMbRECBAIqxD+7ARyhOwE9QvfDd28wbrB+8wNHaG9QblBuAP9IzeADAYLOntwqZQlk6z6mKZEMkRO/2o7T+plpmhplRsUoOTSABtAA/wagij+z2ayg7Pf7XfgLQGxSRSDOdrt95/dNJhOxB9frNQCxQQwSnAdSD24HvOZsgdpWzgG+J0ViWdZAFSASAESMsY0qgIMGWQ4I0FHOwW63w2w/t9vtwX6/3yjVQbPZ7IK8tVqtFCSBeW6Mc9ThGu6RheCDeBSvBfMptzZFHX2EPACZFwAajcYYYnW5c0dxQT9EkayN8xwAsisJMb4TPtqEGYDzg2vg5B6gW6UuU5kvdOVO5T2SiAfAyluAMAVDRns/c2DqBkMDaAANoAE0gAbQAH+PsdyyFQFz8amls0jNSOcjg6nKjHu93gDav5gzzEbWBjuwx5aGQI2UxTdYMBZoCPMYZATiCT0AZjIU0Z4kSV5o3SBS5slIly1q8TqdzpDWnayrl5EuS9L+xUBCGL8uA4junByfVCYDcBXLIPiSA2QjCEAxxg9a3mnBA2Ahc2QjHN21JU9em6bpHA6HTQ5Qr9fnnOuZ8ZrOHgtqlCXyeDyGBb5Qq9VExp+s5HQ6rWgeCu8CjFeB2wxc9M/n8+rhZeIqLn8yxgfGS6XbSAWx5t2+XC5L5fcBHckTHYsH4YTfeR9oxqIBNIAG+DWADwEGAAgZ5RSSVu1LAAAAAElFTkSuQmCC) no-repeat;
222 padding: 15px 15px 15px 30px;
223 margin: 0 0 10px 5px;
224 width: 85%;
225 border: 1px solid #ccc;
226 -moz-border-radius: 5px;
227 -webkit-border-radius: 5px;
228 border-radius: 5px;
229 -moz-box-shadow: 0 1px 1px #525252 inset, 0 1px 0 #6A6A6A;
230 -webkit-box-shadow: 0 1px 1px #525252 inset, 0 1px 0 #6A6A6A;
231 box-shadow: 0 1px 1px #525252 inset, 0 1px 0 #6A6A6A;
232 }
233 #username {
234 background-position: 5px -2px !important;
235 }
236 #password {
237 background-position: 5px -52px !important;
238 }
239 #inputs input:focus {
240 background-color: #fff;
241 border-color: #e8c291;
242 outline: none;
243 -moz-box-shadow: 0 0 0 1px #e8c291 inset;
244 -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
245 box-shadow: 0 0 0 1px #e8c291 inset;
246 }
247 /*--------------------*/
248 #actions {
249 margin: 25px 0 0 0;
250 }
251 #submit {/* bouton de connection */
252 background-color: #ffb94b;
253 background-image: -webkit-gradient(linear, left top, left bottom, from(#C94700), to(#B84100));
254 background-image: -webkit-linear-gradient(top, #C94700, #B84100);
255 background-image: -moz-linear-gradient(top, #C94700, #B84100);
256 background-image: -ms-linear-gradient(top, #C94700, #B84100);
257 background-image: -o-linear-gradient(top, #C94700, #B84100);
258 background-image: linear-gradient(top, #C94700, #B84100);
259 -moz-border-radius: 2px;
260 -webkit-border-radius: 2px;
261 border-radius: 2px;
262 text-shadow: 0 1px 0 rgba(0, 0, 0,0.7);
263 -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 17px 2px rgba(255, 255, 255, 0.2) inset, 0 5px 5px rgba(255, 255, 255, 0.2) inset;
264 -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 17px 2px rgba(255, 255, 255, 0.2) inset, 0 5px 5px rgba(255, 255, 255, 0.2) inset;
265 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 17px 2px rgba(255, 255, 255, 0.2) inset, 0 5px 5px rgba(255, 255, 255, 0.2) inset;
266 display: block;
267 border: none;
268 position: relative;
269 float: none;
270 height: 35px;
271 padding: 0;
272 margin: 0 auto 20px;
273 width: 120px;
274 cursor: pointer;
275 font-size:18px ;
276 color: #FFF;
277 text-transform: capitalize;
278 }
279 #submit:hover,#submit:focus {
280 background-color: #C94700;
281 background-image: -webkit-gradient(linear, left top, left bottom, from(#B84100), to(#C94700));
282 background-image: -webkit-linear-gradient(top, #B84100, #C94700);
283 background-image: -moz-linear-gradient(top, #B84100, #C94700);
284 background-image: -ms-linear-gradient(top, #B84100, #C94700);
285 background-image: -o-linear-gradient(top, #B84100, #C94700);
286 background-image: linear-gradient(top, #B84100, #C94700);
287 }
288 #submit:active {
289 outline: none;
290 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
291 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
292 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
293 }
294 #submit::-moz-focus-inner {border: none;}
295 #actions a {
296 color: #000000;
297 float: none;
298 line-height: 35px;
299 margin-left: 10px;
300 text-decoration: none;
301 }
302 #actions a:hover{color: #FFFFFF;text-decoration: underline;}
303
304 .option {
305 margin: auto;
306 width: 250px;
307 background-color: #C8BCB6;
308 background: -webkit-gradient(linear, left top, left bottom, from(#C8BCB6), to(#B3A39A));
309 background: -webkit-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, .05) 10px, rgba(0, 0, 0, .05) 20px),-webkit-linear-gradient(top, #C8BCB6, #B3A39A);
310 background: -moz-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.05) 20px) repeat scroll 0 0%, -moz-linear-gradient(center top , #C8BCB6, #B3A39A);
311 background: -ms-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0,.05) 10px, rgba(0, 0, 0,.05) 20px),-ms-linear-gradient(top, #C8BCB6, #B3A39A);
312 background: -o-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0,.05) 10px, rgba(0, 0, 0,.05) 20px),-o-linear-gradient(top, #C8BCB6, #B3A39A);
313 background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0,.05) 10px, rgba(0, 0, 0,.05) 20px),linear-gradient(top, #C8BCB6, #B3A39A);
314 -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 2px 2px 2px #1F1F1F inset;
315 -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 2px 2px 2px #1F1F1F inset;
316 box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 2px 2px 2px #1F1F1F inset;
317 -moz-border-radius: 5px;
318 -webkit-border-radius: 5px;
319 border-radius: 5px;
320 }
321 .option:after{
322 content: "";
323 width: 260px;
324 height: 40px;
325 left: 78px;
326 top: 50px;
327 position: absolute;
328 border: 1px dashed rgba(143, 143, 143,0.7);
329 border-bottom: none;
330 -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 1px 1px rgba(0, 0, 0, 0.5) inset;
331 -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 1px 1px rgba(0, 0, 0, 0.5) inset;
332 box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 1px 1px rgba(0, 0, 0, 0.5) inset;
333 -moz-border-radius: 2px;
334 -webkit-border-radius: 2px;
335 border-radius: 2px;
336 z-index: -1;
337 }
338 .apple, .butt:before, .top span:after, .butt:after, .top:before, .top:after, .butt:before, .butt:after {
339 background: #FFF; /* foreground color */
340 }
341 .bite, .butt span, .butt, .top, .top span {
342 background: #DE6625; /* background color */
343 }
344 .apple {
345 width: 25.06px;
346 height: 22.2px;
347 border-radius: 36% 36% 41% 41% / 42% 42% 75% 75%;
348 position: absolute;
349 margin: 0px;
350 right: -22px;
351 top: 92px;
352 z-index: 100;
353 }
354 .bite {
355 position: absolute;
356 width: 60%;
357 height: 62%;
358 right: -40%;
359 top: 8%;
360 border-radius: 60%;
361 }
362 .butt span {
363 display: block;
364 position: absolute;
365 border-radius: 100% 100% 0% 0%;
366 width: 24.5%;
367 height: 400%;
368 bottom: -239%;
369 left: 38%;
370 }
371 .butt {
372 position: absolute;
373 width: 100%;
374 height: 4%;
375 bottom: -1%;
376 }
377 .butt:before {
378 content: '';
379 position: absolute;
380 width: 24%;
381 height: 400%;
382 border-radius: 0% 0% 100% 100%;
383 left: 21%;
384 bottom: 38%;
385 }
386 .butt:after {
387 content: '';
388 position: absolute;
389 width: 23.4%;
390 height: 400%;
391 border-radius: 0% 0% 100% 100%;
392 right: 21%;
393 bottom: 38%;
394 }
395
396
397 .top span {
398 display: block;
399 position: absolute;
400 border-radius: 0 0 44% 44% / 0 0 100% 100%;
401 width: 63%;
402 height: 259%;
403 top: -92%;
404 left: 18.6%;
405 z-index: 3;
406 }
407 .top span:after {
408 border-radius: 100% 0 100% 0;
409 content: "";
410 height: 242%;
411 left: 41%;
412 position: absolute;
413 top: -193%;
414 width: 90%;
415 }
416 .top {
417 position: absolute;
418 width: 42%;
419 height: 4%;
420 top: 0px;
421 left: 29%;
422 }
423 .top:before {
424 content: '';
425 position: absolute;
426 width: 62%;
427 height: 260%;
428 border-radius: 100% 100% 0% 0% / 100% 200% 0% 0%;
429 left: -27%;
430 top: 1%;
431 }
432 .top:after {
433 content: '';
434 position: absolute;
435 width: 62%;
436 height: 260%;
437 border-radius: 100% 100% 0% 0% / 200% 100% 0% 0%;
438 right: -27%;
439 top: 1%;
440 }
2 body {height: 100%;}
3 body {
4 font-family: /* 'Istok Web' ,*/ "Helvetica", sans-serif;
5 font-size: 12px;
6 margin: 0;
7 background-color: #363839;
8 background-image: -webkit-gradient(linear, left top, left bottom, from(#7C8084), to(#363839));
9 background-image: -webkit-linear-gradient(top, #7C8084, #363839);
10 background-image: -moz-linear-gradient(top, #7C8084, #363839);
11 background-image: -ms-linear-gradient(top, #7C8084, #363839);
12 background-image: -o-linear-gradient(top, #7C8084, #363839);
13 background-image: linear-gradient(top, #7C8084, #363839);
14 }
15 #login { /* box formulaire */
16 background:
17 radial-gradient(black 15%, transparent 16%) 0 0,
18 radial-gradient(black 15%, transparent 16%) 8px 8px,
19 radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
20 radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
21 background:
22 -moz-radial-gradient(black 15%, transparent 16%) 0 0,
23 -moz-radial-gradient(black 15%, transparent 16%) 8px 8px,
24 -moz-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
25 -moz-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
26 background:
27 -webkit-radial-gradient(black 15%, transparent 16%) 0 0,
28 -webkit-radial-gradient(black 15%, transparent 16%) 8px 8px,
29 -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
30 -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
31 background-color:#373737;
32 background-size:16px 16px;
33 -webkit-background-size:16px 16px;
34 -moz-background-size:16px 16px;
35 -o-background-size:16px 16px;
36 height: 310px;
37 width: 420px;
38 margin: -175px 0 0 -240px;
39 padding: 30px;
40 position: absolute;
41 top: 50%;
42 left: 50%;
43 z-index: 0;
44 -moz-border-radius: 10px;
45 -webkit-border-radius: 10px;
46 border-radius: 10px;
47 -webkit-box-shadow:
48 0 0 2px rgba(0,0,0,0.5),
49 0 1px 1px rgba(0,0,0,0.5),
50 0 3px 0 #373737,
51 0 4px 0 rgba(0,0,0,0.5),
52 0 6px 0 #373737,
53 0 7px 0 rgba(0,0,0,0.5),
54 0 -10px 5px 10px rgba(0, 0, 0, 0.3) inset,
55 0 10px 10px 15px rgba(255, 255, 255, 0.1) inset;
56 -moz-box-shadow:
57 0 0 2px rgba(0, 0, 0, 0.5),
58 1px 1px 0 rgba(0,0,0,0.5),
59 3px 3px #373737,
60 4px 4px 0 rgba(0,0,0,0.5),
61 6px 6px #373737,
62 7px 7px 0 rgba(0,0,0,0.5)
63 0 -10px 5px 10px rgba(0, 0, 0, 0.3) inset,
64 0 10px 10px 15px rgba(255, 255, 255, 0.1) inset;
65 box-shadow:
66 0 0 2px rgba(0, 0, 0, 0.5),
67 0 1px 1px rgba(0,0,0,0.5),
68 0 3px 0 #373737,
69 0 4px 0 rgba(0,0,0,0.5),
70 0 6px 0 #373737,
71 0 7px 0 rgba(0,0,0,0.5),
72 0 -10px 5px 10px rgba(0, 0, 0, 0.3) inset,
73 0 10px 10px 15px rgba(255, 255, 255, 0.1) inset;
74 }
75 #login:before { /* couture autour du formulaire */
76 content: '';
77 position: absolute;
78 z-index: -1;
79 border: 1px dashed rgba(143, 143, 143, 0.7);
80 top: 5px;
81 bottom: 5px;
82 left: 5px;
83 right: 5px;
84 -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 5px 1px rgba(0, 0, 0, 0.5) inset;
85 -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 5px 1px rgba(0, 0, 0, 0.5) inset;
86 box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 5px 1px rgba(0, 0, 0, 0.5) inset;
87 }
88 #login:after{
89 -moz-transform: none;
90 border-bottom: 28px solid transparent;
91 border-left: 28px solid #DE6625;
92 border-right: 28px solid #DE6625;
93 height: 40px;
94 position: absolute;
95 right: -36px;
96 width: 0;
97 top: 88px;
98 content: "";
99 display: block;
100 z-index: 20;
101 }
102 h1 {
103 text-transform: capitalize;
104 text-align: right;
105 margin: 0 0 30px 0;
106 letter-spacing: 4px;
107 font-size:35px;
108 letter-spacing: -0.06em;
109 }
110 #ff-proof.ribbon:after { /* ruban tombant */
111 -moz-transform: none;
112 border-top: 55px solid transparent;
113 border-left: 55px solid #DE6625;
114 border-right: 55px solid transparent;
115 height: 40px;
116 position: absolute;
117 right: -107px;
118 width: 0;
119 bottom: -43px;
120 content: "";
121 display: block;
122 z-index: 20;
123 }
124 .ribbon:before { /* ombre du ruban tombant */
125 transform: rotate(280deg);
126 -moz-transform: rotate(280deg);
127 -webkit-transform: rotate(280deg);
128 transform-origin: right bottom;
129 -webkit-transform-origin: right bottom;
130 -moz-transform-origin: right bottom;
131 border-top: 55px solid rgba(0, 0, 0, 0.3);
132 border-right: 55px solid transparent;
133 bottom: 30px;
134 content: "";
135 display: block;
136 height: 0;
137 position: absolute;
138 right: -53px;
139 width: 20px;
140 z-index: 10;
141 box-shadow: -2px -2px 2px rgba(0, 0, 0, 0.3);
142 }
143 .ribbon { /* ruban */
144 background-color: #C94700;
145 background-size:5px 5px,100% 100% ;
146 background-image: -webkit-gradient(linear, left top, left bottom, from(#C94700), to(#B84100));
147 background-image: -webkit-linear-gradient(45deg , transparent 0%, transparent 25%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.15) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.15) 100%), rgba(0, 0, 0,.125) 20px),
148 -webkit-linear-gradient(top, #C94700, #B84100);
149 background-image: -moz-linear-gradient(45deg , transparent 0%, transparent 25%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.15) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.15) 100%),
150 -moz-linear-gradient(top, #C94700, #B84100);
151 background-image: -ms-linear-gradient(45deg , transparent 0%, transparent 25%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.15) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.15) 100%), rgba(0, 0, 0,.125) 20px),
152 -ms-linear-gradient(top, #C94700, #B84100);
153 background-image: -o-linear-gradient(45deg , transparent 0%, transparent 25%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.15) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.15) 100%), rgba(0, 0, 0,.125) 20px),
154 -o-linear-gradient(top, #C94700, #B84100);
155 background-image: linear-gradient(45deg , transparent 0%, transparent 25%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0.15) 50%, transparent 50%, transparent 75%, rgba(0, 0, 0, 0.15) 75%, rgba(0, 0, 0, 0.15) 100%), rgba(0, 0, 0,.125) 20px),
156 linear-gradient(top, #C94700, #B84100);
157 /* border-bottom: 1px solid rgba(255, 255, 255, 0.3); */
158 border-top-right-radius: 20px 5px;
159 color: #301607;
160 height: 55px;
161 width: 460px;
162 line-height: 55px;
163 padding: 0 5px 0 0;
164 margin-left: -32px;
165 position: relative;
166 text-shadow: 0px 1px 0 rgba(255, 255, 255, 0.3);
167 box-shadow: 0 -25px 25px rgba(0, 0, 0, 0.2) inset, 0 0 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(0, 0, 0, 0.75) inset, 0 2px 5px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.7),inset 4px 0 2px -1px rgba(0,0,0,0.3),0 -2px 5px rgba(0, 0, 0, 0.2) ;
168 -moz-box-shadow: 0 -25px 25px rgba(0, 0, 0, 0.2) inset, 0 0 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(0, 0, 0, 0.75) inset, 0 2px 5px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.7),inset 4px 0 2px -1px rgba(0,0,0,0.3),0 -2px 5px rgba(0, 0, 0, 0.2) ;
169 -webkit-box-shadow: 0 -25px 25px rgba(0, 0, 0, 0.2) inset, 0 0 0 2px rgba(255, 255, 255, 0.25) inset, 0 0 0 1px rgba(0, 0, 0, 0.75) inset, 0 2px 5px rgba(0, 0, 0, 0.25), 0px 1px 2px rgba(0, 0, 0, 0.7),inset 4px 0 2px -1px rgba(0,0,0,0.3),0 -2px 5px rgba(0, 0, 0, 0.2) ;
170 }
171 fieldset {
172 position: relative;
173 border: 0;
174 padding: 0;
175 margin: 0;
176 text-align: center;
177
178 }
179 fieldset#actions{
180 display: block;
181 height: 92px;
182 overflow: hidden;
183 position: relative;
184 }
185 fieldset#inputs{ /* contour des inputs */
186 padding: 10px;
187 margin: 0px;
188 width: 400px;
189 background-color: #C8BCB6;
190 background: -webkit-gradient(linear, left top, left bottom, from(#C8BCB6), to(#B3A39A));
191 background: -webkit-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, .05) 10px, rgba(0, 0, 0, .05) 20px),-webkit-linear-gradient(top, #C8BCB6, #B3A39A);
192 background: -moz-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.05) 20px) repeat scroll 0 0%, -moz-linear-gradient(center top , #C8BCB6, #B3A39A);
193 background: -ms-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0,.05) 10px, rgba(0, 0, 0,.05) 20px),-ms-linear-gradient(top, #C8BCB6, #B3A39A);
194 background: -o-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0,.05) 10px, rgba(0, 0, 0,.05) 20px),-o-linear-gradient(top, #C8BCB6, #B3A39A);
195 background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0,.05) 10px, rgba(0, 0, 0,.05) 20px),linear-gradient(top, #C8BCB6, #B3A39A);
196 -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 2px 2px 2px #1F1F1F inset;
197 -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 2px 2px 2px #1F1F1F inset;
198 box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 2px 2px 2px #1F1F1F inset;
199 -moz-border-radius: 5px;
200 -webkit-border-radius: 5px;
201 border-radius: 5px;
202 }
203 @media screen and (-webkit-animation) {fieldset#inputs:before {width: 440px!important;}}
204 fieldset#inputs:before{ /* couture autour des inputs */
205 content: "";
206 padding: 0px;
207 margin: -18px -22px;
208 width: 435px;
209 height: 145px;
210 position: absolute;
211 border: 1px dashed rgba(143, 143, 143,0.7);
212 -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 1px 1px rgba(0, 0, 0, 0.5) inset;
213 -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 1px 1px rgba(0, 0, 0, 0.5) inset;
214 box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 1px 1px rgba(0, 0, 0, 0.5) inset;
215 -moz-border-radius: 2px;
216 -webkit-border-radius: 2px;
217 border-radius: 2px;
218 z-index: -1;
219 }
220 #inputs input { /* pictos des inputs */
221 background: #f1f1f1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABkCAYAAACPQLC2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAhtJREFUeNrsV1FuwjAMbRECBAIqxD+7ARyhOwE9QvfDd28wbrB+8wNHaG9QblBuAP9IzeADAYLOntwqZQlk6z6mKZEMkRO/2o7T+plpmhplRsUoOTSABtAA/wagij+z2ayg7Pf7XfgLQGxSRSDOdrt95/dNJhOxB9frNQCxQQwSnAdSD24HvOZsgdpWzgG+J0ViWdZAFSASAESMsY0qgIMGWQ4I0FHOwW63w2w/t9vtwX6/3yjVQbPZ7IK8tVqtFCSBeW6Mc9ThGu6RheCDeBSvBfMptzZFHX2EPACZFwAajcYYYnW5c0dxQT9EkayN8xwAsisJMb4TPtqEGYDzg2vg5B6gW6UuU5kvdOVO5T2SiAfAyluAMAVDRns/c2DqBkMDaAANoAE0gAbQAH+PsdyyFQFz8amls0jNSOcjg6nKjHu93gDav5gzzEbWBjuwx5aGQI2UxTdYMBZoCPMYZATiCT0AZjIU0Z4kSV5o3SBS5slIly1q8TqdzpDWnayrl5EuS9L+xUBCGL8uA4junByfVCYDcBXLIPiSA2QjCEAxxg9a3mnBA2Ahc2QjHN21JU9em6bpHA6HTQ5Qr9fnnOuZ8ZrOHgtqlCXyeDyGBb5Qq9VExp+s5HQ6rWgeCu8CjFeB2wxc9M/n8+rhZeIqLn8yxgfGS6XbSAWx5t2+XC5L5fcBHckTHYsH4YTfeR9oxqIBNIAG+DWADwEGAAgZ5RSSVu1LAAAAAElFTkSuQmCC) no-repeat;
222 padding: 15px 15px 15px 30px;
223 margin: 0 0 10px 5px;
224 width: 85%;
225 border: 1px solid #ccc;
226 -moz-border-radius: 5px;
227 -webkit-border-radius: 5px;
228 border-radius: 5px;
229 -moz-box-shadow: 0 1px 1px #525252 inset, 0 1px 0 #6A6A6A;
230 -webkit-box-shadow: 0 1px 1px #525252 inset, 0 1px 0 #6A6A6A;
231 box-shadow: 0 1px 1px #525252 inset, 0 1px 0 #6A6A6A;
232 }
233 #username {
234 background-position: 5px -2px !important;
235 }
236 #password {
237 background-position: 5px -52px !important;
238 }
239 #inputs input:focus {
240 background-color: #fff;
241 border-color: #e8c291;
242 outline: none;
243 -moz-box-shadow: 0 0 0 1px #e8c291 inset;
244 -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
245 box-shadow: 0 0 0 1px #e8c291 inset;
246 }
247 /*--------------------*/
248 #actions {
249 margin: 25px 0 0 0;
250 }
251 #submit {/* bouton de connection */
252 background-color: #ffb94b;
253 background-image: -webkit-gradient(linear, left top, left bottom, from(#C94700), to(#B84100));
254 background-image: -webkit-linear-gradient(top, #C94700, #B84100);
255 background-image: -moz-linear-gradient(top, #C94700, #B84100);
256 background-image: -ms-linear-gradient(top, #C94700, #B84100);
257 background-image: -o-linear-gradient(top, #C94700, #B84100);
258 background-image: linear-gradient(top, #C94700, #B84100);
259 -moz-border-radius: 2px;
260 -webkit-border-radius: 2px;
261 border-radius: 2px;
262 text-shadow: 0 1px 0 rgba(0, 0, 0,0.7);
263 -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 17px 2px rgba(255, 255, 255, 0.2) inset, 0 5px 5px rgba(255, 255, 255, 0.2) inset;
264 -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 17px 2px rgba(255, 255, 255, 0.2) inset, 0 5px 5px rgba(255, 255, 255, 0.2) inset;
265 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 17px 2px rgba(255, 255, 255, 0.2) inset, 0 5px 5px rgba(255, 255, 255, 0.2) inset;
266 display: block;
267 border: none;
268 position: relative;
269 float: none;
270 height: 35px;
271 padding: 0;
272 margin: 0 auto 20px;
273 width: 120px;
274 cursor: pointer;
275 font-size:18px ;
276 color: #FFF;
277 text-transform: capitalize;
278 }
279 #submit:hover,#submit:focus {
280 background-color: #C94700;
281 background-image: -webkit-gradient(linear, left top, left bottom, from(#B84100), to(#C94700));
282 background-image: -webkit-linear-gradient(top, #B84100, #C94700);
283 background-image: -moz-linear-gradient(top, #B84100, #C94700);
284 background-image: -ms-linear-gradient(top, #B84100, #C94700);
285 background-image: -o-linear-gradient(top, #B84100, #C94700);
286 background-image: linear-gradient(top, #B84100, #C94700);
287 }
288 #submit:active {
289 outline: none;
290 -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
291 -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
292 box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
293 }
294 #submit::-moz-focus-inner {border: none;}
295 #actions a {
296 color: #000000;
297 float: none;
298 line-height: 35px;
299 margin-left: 10px;
300 text-decoration: none;
301 }
302 #actions a:hover{color: #FFFFFF;text-decoration: underline;}
303
304 .option {
305 margin: auto;
306 width: 250px;
307 background-color: #C8BCB6;
308 background: -webkit-gradient(linear, left top, left bottom, from(#C8BCB6), to(#B3A39A));
309 background: -webkit-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, .05) 10px, rgba(0, 0, 0, .05) 20px),-webkit-linear-gradient(top, #C8BCB6, #B3A39A);
310 background: -moz-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0, 0.05) 10px, rgba(0, 0, 0, 0.05) 20px) repeat scroll 0 0%, -moz-linear-gradient(center top , #C8BCB6, #B3A39A);
311 background: -ms-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0,.05) 10px, rgba(0, 0, 0,.05) 20px),-ms-linear-gradient(top, #C8BCB6, #B3A39A);
312 background: -o-repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0,.05) 10px, rgba(0, 0, 0,.05) 20px),-o-linear-gradient(top, #C8BCB6, #B3A39A);
313 background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0, 0, 0,.05) 10px, rgba(0, 0, 0,.05) 20px),linear-gradient(top, #C8BCB6, #B3A39A);
314 -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 2px 2px 2px #1F1F1F inset;
315 -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 2px 2px 2px #1F1F1F inset;
316 box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.5) inset, 0 2px 2px 2px #1F1F1F inset;
317 -moz-border-radius: 5px;
318 -webkit-border-radius: 5px;
319 border-radius: 5px;
320 }
321 .option:after{
322 content: "";
323 width: 260px;
324 height: 40px;
325 left: 78px;
326 top: 50px;
327 position: absolute;
328 border: 1px dashed rgba(143, 143, 143,0.7);
329 border-bottom: none;
330 -moz-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 1px 1px rgba(0, 0, 0, 0.5) inset;
331 -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 1px 1px rgba(0, 0, 0, 0.5) inset;
332 box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.8),0 0 1px 1px rgba(0, 0, 0, 0.5) inset;
333 -moz-border-radius: 2px;
334 -webkit-border-radius: 2px;
335 border-radius: 2px;
336 z-index: -1;
337 }
338 .apple, .butt:before, .top span:after, .butt:after, .top:before, .top:after, .butt:before, .butt:after {
339 background: #FFF; /* foreground color */
340 }
341 .bite, .butt span, .butt, .top, .top span {
342 background: #DE6625; /* background color */
343 }
344 .apple {
345 width: 25.06px;
346 height: 22.2px;
347 border-radius: 36% 36% 41% 41% / 42% 42% 75% 75%;
348 position: absolute;
349 margin: 0px;
350 right: -22px;
351 top: 92px;
352 z-index: 100;
353 }
354 .bite {
355 position: absolute;
356 width: 60%;
357 height: 62%;
358 right: -40%;
359 top: 8%;
360 border-radius: 60%;
361 }
362 .butt span {
363 display: block;
364 position: absolute;
365 border-radius: 100% 100% 0% 0%;
366 width: 24.5%;
367 height: 400%;
368 bottom: -239%;
369 left: 38%;
370 }
371 .butt {
372 position: absolute;
373 width: 100%;
374 height: 4%;
375 bottom: -1%;
376 }
377 .butt:before {
378 content: '';
379 position: absolute;
380 width: 24%;
381 height: 400%;
382 border-radius: 0% 0% 100% 100%;
383 left: 21%;
384 bottom: 38%;
385 }
386 .butt:after {
387 content: '';
388 position: absolute;
389 width: 23.4%;
390 height: 400%;
391 border-radius: 0% 0% 100% 100%;
392 right: 21%;
393 bottom: 38%;
394 }
395
396
397 .top span {
398 display: block;
399 position: absolute;
400 border-radius: 0 0 44% 44% / 0 0 100% 100%;
401 width: 63%;
402 height: 259%;
403 top: -92%;
404 left: 18.6%;
405 z-index: 3;
406 }
407 .top span:after {
408 border-radius: 100% 0 100% 0;
409 content: "";
410 height: 242%;
411 left: 41%;
412 position: absolute;
413 top: -193%;
414 width: 90%;
415 }
416 .top {
417 position: absolute;
418 width: 42%;
419 height: 4%;
420 top: 0px;
421 left: 29%;
422 }
423 .top:before {
424 content: '';
425 position: absolute;
426 width: 62%;
427 height: 260%;
428 border-radius: 100% 100% 0% 0% / 100% 200% 0% 0%;
429 left: -27%;
430 top: 1%;
431 }
432 .top:after {
433 content: '';
434 position: absolute;
435 width: 62%;
436 height: 260%;
437 border-radius: 100% 100% 0% 0% / 200% 100% 0% 0%;
438 right: -27%;
439 top: 1%;
440 }
